$(document).ready(function(){
    /*-------轮播图-------*/
    const carousel_width = $(".carousel").width(); //获取轮播图的宽度
    let carousel_images = $(".carousel-images");         //获取轮播图片的容器
    const clone =$(".carousel-images li:first").clone();
    carousel_images.append(clone);               //复制最后一张图片，并插入到carousel-images中；
    const size = $(".carousel-images li").length; //轮播图的个数
    carousel_images.css({"width": size * 100 + "%"});
    $(".carousel-images li").css({"width" : 100 / size + "%"});
    /*---------设置焦点--------*/
    for(let i = 0; i < size - 1; i ++){
        $(".carousel-page").append($("<li></li>"))
    };
    const carousel_page_lis = $(".carousel-page li");
    carousel_page_lis.eq(0).addClass("active");      //第一个为激活状态
    let current_index = 0;                                   //获取当前轮播图的位置
    /*-------点击向左按钮------*/
    $(".carousel-prev").click(function(){
        current_index -= 1;
        move();
    });
    /*-------点击向右按钮------------*/
    $(".carousel-next").click(function(){
        current_index += 1;
        move();
    });
    /*-------轮播运动函数--------*/
    function move(){
        if(current_index <= -1){
            carousel_images.css({left: `-${(size - 1) * carousel_width}px`});
            current_index = size - 2;
        };
        if(current_index == size){
            carousel_images.css({left: "0"});
            current_index = 1;
        };
        let left = (-1 * carousel_width * current_index) + "px";
        carousel_images.animate({left});
        var index = current_index;
        if(current_index == size - 1) index = 0;
        carousel_page_lis.removeClass("active").eq(index).addClass("active");
    };
    /*------自动轮播----------*/
    let timer = setInterval(()=>{
        current_index += 1;
        move();
    }, 2000);
    /*------鼠标滑入时停止轮播-------------*/
    $(".carousel").mouseenter(function(){
        console.log("----enter--");
        clearInterval(timer);
    });
    /*------鼠标滑出时开始轮播------------*/
    $(".carousel").mouseleave(function(){
        console.log("----leave-----");
        timer = setInterval(()=>{
            current_index += 1;
            move();
        }, 2000);
    });
    $(".carousel-page li").each(function(index){
        $(this).click(function(){
            current_index = index;
            move();
        });
    });

    // setCarouselHeight();
    // function setCarouselHeight(){
    //     let height = carousel_width * 530  / 1920;
    //     $(".carousel").css({height: height + "px"});
    // };
});